<template>
  <view class="order-detail-con">
    <view class="top-box" :class="orderDetailData.receiveCode ? '' : 'space-around'">
      <div class="orderStatus">{{ orderDetailData.orderStatusName }}</div>
      <div v-if="orderDetailData.receiveCode && orderDetailData.sentType == 40" class="receive-code">
        <span>收货码：</span>
        {{ orderDetailData.receiveCode }}
      </div>
    </view>
    <address-bar :order-detail-data="orderDetailData" />
    <view v-if="isShowLogistics" class="list-bg" @click.stop="toLogisticsInfoFn(orderDetailData.sentType)">
      <view class="list-title">配送信息</view>
      <uni-list class="list-group" :border="false">
        <uni-list-item :border="false">
          <text slot="header" class="row-header">{{ orderDetailData.sentTypeName }}</text>
          <text slot="footer" class="row-footer-orange row-show-arrow">{{ orderDetailData.orderStatusName }}</text>
        </uni-list-item>
      </uni-list>
    </view>
    <OrderProductList
      :order-detail-data="orderDetailData"
      :show-warehouse-label="showWarehouseLabel"
      :order-items-detail-data="orderItemsDetailData"
      :all-goods-page-path="'/orders/orderItemsDetail/index'"
      :total-record="totalRecord"
    />
    <OrderProductMessage :order-detail-data="orderDetailData" />
    <!--  增加 是否自主确认收货 判断  当前登录账号与订单的下单账号一致 且  是否自主确认收货 (0:否 1：是) 且 部分发货或待收货或部分收货的  -->
    <template v-if="orderDetailData.xdAccount == vuex_accountInfo.loginAccount && (orderDetailData.orderStatus == 50 || orderDetailData.orderStatus == 50 || orderDetailData.orderStatus == 55) && orderDetailData.isConfirmReceipt == 1">
      <PageFooterBar
        btn-name="确认收货"
        :info="footerInfo"
        @click="confirmReceiveFn"
      />
    </template>
    <view v-else class="sticky-bottom">合计：<text class="price">¥ {{ orderDetailData.showProductPrice && orderDetailData.showProductPrice == 1 ? orderDetailData.billAmount : '*.*' }}</text></view>
  </view>
</template>

<script>
import OrderProductList from '@/components/order-product-list/order-product-list'
import AddressBar from '@/components/addressBar/address-bar'
import OrderProductMessage from '@/components/order-product-list/order-product-message'
import { postOrderDetail, postOrderItemsDetail } from '@/api/orderApi'
import { customerConfirmReceipt } from '@/api/payment'
import {
  returnLoginFn,
  getSystemTime,
} from '@/common/common'
import { getFormatDate } from '@/common/changeTimeFormat'
import PageFooterBar from '@/components/page-footer-bar'

export default {
  name: 'OrderDetail',
  components: {
    OrderProductList,
    AddressBar,
    OrderProductMessage,
    PageFooterBar
  },
  data() {
    return {
      orderDetailData: {},
      isShowLogistics: true,
      showWarehouseLabel: false,
      orderItemsDetailData: [],
      orderNo: '',
      totalRecord: 0,
    }
  },
  computed: {
    footerInfo() {
      const info = {
        label: '合计',
        value: this.orderDetailData.showProductPrice && this.orderDetailData.showProductPrice == 1 ? this.orderDetailData.billAmount : '*.*'
      }
      return info
    },
  },
  onLoad(option) {
    this.orderNo = option.orderNo
    if (this.vuex_loginStatus && this.vuex_accountInfo && this.vuex_accountInfo.loginAccount) {
      this.orderDetail()
      this.itemsDetail()
    } else {
      const callbackUrl = `/orders/order-details/order-details`
      const urlParams = JSON.stringify({ orderNo: this.orderNo })
      returnLoginFn(callbackUrl, urlParams)
    }
  },
  methods: {
    /*获取时间*/
    async getAccountTimeFn() {
      const time = await getSystemTime()
      return getFormatDate(new Date(time)).getDateStr('strSecond')
    },
    /*获取订单详情*/
    orderDetail() {
      const params = { 'orderNo': this.orderNo }
      postOrderDetail(params).then((res) => {
        if (res.data) {
          this.orderDetailData = res.data
          // 是否显示物流信息
          // 订单类型类型为【19654：门店自提； 19655：配送客户自提 ；19651：无货自提;19847:换票; 33791:维修订单】 时不显示配送信息
          this.$nextTick(() => {
            if (this.orderDetailData.orderType == 19654 || this.orderDetailData.orderType == 19655 || this.orderDetailData.orderType == 19651 || this.orderDetailData.orderType == 19847 || this.orderDetailData.orderType == 33791) {
              this.isShowLogistics = false;
            }
          })
          /* 仓位:配方方式为鑫方盛物流、快递、快运-送货上门、快运-站点自提、专车包车时不显示，其他自提类的显示仓位信息
          * 配送方式;10=快递；20=快运-送货上门；21=快运-站点自提；30=专车包车；40=鑫方盛物流；50=上门自提 */
          const sentType = res.data.sentType
          if (sentType != 10 && sentType != 20 && sentType != 21 && sentType != 30 && sentType != 40) {
            this.showWarehouseLabel = true
          }
        }
      }).catch(() => {

      })
    },
    /*查看物流信息*/
    toLogisticsInfoFn(sentType) {
      uni.navigateTo({
        url: '/orders/logisticsInfo/index?orderNo=' + this.orderNo + '&sentType=' + sentType
      });
    },
    /*获取商品信息*/
    itemsDetail() {
      const params = { 'orderNo': this.orderNo, 'pageNum': 1, 'pageSize': 3 }
      postOrderItemsDetail(params).then((res) => {
        if (res.errorCode == 0) {
          this.orderItemsDetailData = res.data.result
          this.totalRecord = res.data.totalRecord
        }
      }).catch(() => {
        // eslint-disable-next-line no-mixed-spaces-and-tabs
      })
    },
    /*确认收货*/
    async confirmReceiveFn() {
      const signTime = await this.getAccountTimeFn()
      const params = {
        orderNo: this.orderNo,
        type: 2, // 操作类型-1:确认发货-2:确认收货
        signUserId: 28,
        signUserName: '客户',
        signTime
      }
      const res = await customerConfirmReceipt(params)
      if (res.errorCode != 0) {
        this.$u.toast(res.msg)
        return
      }
      this.$u.toast('确认收货成功')
      uni.redirectTo({
        url: '/pages/order/moreOrder'
      });
    }
  }
}
</script>

<style scoped lang="scss">
.order-detail-con{
  padding-bottom:170rpx;
  .sticky-bottom {
    .price {
      font-weight: 700;
    }
  }
  .top-box{
    width: 94%;
    margin: 0 auto;
    margin-top: 20rpx;
    background: #FFFFFF;
    padding: 20rpx 0rpx;
    border-radius: 8rpx;
    display: flex;
    justify-content: space-between;
    .orderStatus {
      color: $uni-orange;
      font-size: $uni-font-size-base;
      font-weight: bold;
      margin-left: 24rpx;
    }
    .receive-code {
      margin-right: 24rpx;
      font-size: $uni-font-size-base;
      font-weight: bold;
      span {
        font-weight: normal;
        color: $uni-text-color-tips;
      }
    }
  }
  .space-around{
    justify-content: space-around;
  }
  .detail-state{
    height: 128rpx;
    line-height: 128rpx;
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    color:$uni-white;
  }
}
.row-header{
  font-size: $uni-font-size-sm;
  color: $uni-grey-999;
}
.row-footer-orange{
  font-size: $uni-font-size-sm;
  color: $uni-orange;
}
.row-show-arrow{
  background: url("../../static/image/orderdetail_right_arrow.png") no-repeat right center/20rpx 32rpx;
  padding-right:42rpx;
}
</style>
